import Image from "next/image"
import { Play } from "lucide-react"
import { Button } from "@/components/ui/button"

const newSongs = [
  {
    id: 1,
    title: "外婆话",
    artist: "陆泽",
    duration: "03:00",
    image: "/placeholder.svg",
  },
  {
    id: 2,
    title: "90S",
    artist: "ICE杨长青/Gibb-Z/TrickYzb",
    duration: "03:00",
    image: "/placeholder.svg",
  },
  {
    id: 3,
    title: "我最闪亮",
    artist: "张含韵",
    duration: "03:30",
    image: "/placeholder.svg",
  },
  {
    id: 4,
    title: "La Bamba",
    artist: "Ara Ketu",
    duration: "02:45",
    image: "/placeholder.svg",
  },
  {
    id: 5,
    title: "Hübsche Welt",
    artist: "Mary Roos",
    duration: "03:15",
    image: "/placeholder.svg",
  },
]

export function NewSongList() {
  return (
    <div className="space-y-4">
      {newSongs.map((song, index) => (
        <div key={song.id} className="flex items-center space-x-4 p-2 rounded-lg hover:bg-accent group">
          <div className="text-2xl font-bold text-muted-foreground w-8 text-center">{index + 1}</div>
          <div className="relative w-16 h-16 flex-shrink-0">
            <Image
              src={song.image || "/placeholder.svg"}
              alt={song.title}
              layout="fill"
              objectFit="cover"
              className="rounded-md"
            />
            <Button
              size="icon"
              variant="secondary"
              className="absolute inset-0 m-auto h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <Play className="h-4 w-4" />
            </Button>
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-medium truncate">{song.title}</h3>
            <p className="text-sm text-muted-foreground truncate">{song.artist}</p>
          </div>
          <div className="text-sm text-muted-foreground">{song.duration}</div>
        </div>
      ))}
    </div>
  )
}

